<template>
    <a-card>
      <div>
        <a-row >
          <a-col :span="6">
            <a-button type="primary" @click="handleAdd" style="padding: 0 30px;">新增</a-button>
          </a-col>
        </a-row>
          <a-table row-key="id" show-empty-tree :stripe="false" :pagination="false" :data="tableData" :columns="columns" style="margin-top: 20px;">
            <template #operation="{record}">
              <a-space>
                <a-button type="primary" size="mini" shape="round" class="yellow_color" @click="handleEdit(record)">编辑</a-button>
                <a-popconfirm                          
                    content="确定要删除该数据吗?"
                    position="bottom"
                    @ok="handleDel(record)">
                    <a-button type="primary" size="mini" shape="round" class="red_color" >
                      删除
                    </a-button>
                  </a-popconfirm>
               <a-button type="primary" size="mini" shape="round"  @click="handleLanguage(record)">多语言</a-button>
              </a-space>
             
            </template>
          </a-table>
      </div>
      <editForm ref="editRef" @success="getData"></editForm>
      <language ref="languageRef"></language>
    </a-card>
</template>
<script setup>
 import{ref,onMounted, reactive} from 'vue'
  import { Message } from '@arco-design/web-vue'
 import mallApi from '@/api/system/mall'
 import { throttle } from 'lodash'
 import editForm from './edit.vue'
 import language from './language.vue'
 const tableData=ref([])
 const editRef=ref(false)
 const languageRef=ref(false)
 const columns = reactive([
  { title: '产品名称', dataIndex: 'name', width: 180,align: 'center' },
  { title: '语言数量', dataIndex: 'lang_count', width: 180,align: 'center' },
  { title: '创建时间', dataIndex: 'create_time', width: 180,align: 'center' },
  { title: '更新时间', dataIndex: 'update_time', width: 180,align: 'center' },
  { title: '操作', slotName: 'operation', width: 180,align: 'center' },
])
 onMounted(()=>{
    getData() 
 })
 const handleAdd=()=>{
    editRef.value.open('add')
 }
 const handleEdit=(record)=>{
    editRef.value.open('edit',record.id)
    editRef.value.setFormData(record)
 }
 const handleLanguage=(record)=>{
    languageRef.value.open(record)
 }
 const handleDel=throttle(async (record) => {
      const { data } = await mallApi.delCate({id:record.id})
      Message.success(`刪除成功`)
      getData()
  }, 2000)
 const getData=async()=>{
    const result=await mallApi.cateList()
    result.data.list.forEach(item=>{
      item.children=item.son_menu
    })
    tableData.value=result.data.list
 }
</script>